<script >

import {postData} from "@/Api/api.js";

export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      async login() {
        const data = await postData('login', {
          username: this.username,
          password: this.password
        })
        console.log(data)
        if (data==null) {
          alert('用户名或密码错误');
          this.username = '';
          this.password = '';
        }
        //JSON.stringify把一个对象转成json
        //   localStorage.setItem('loginUser',JSON.stringify(data))
        localStorage.setItem('loginUser',data.token);
          alert('登录成功');
          this.$router.push('/showone');



        //  // /* const data = await fetchData('getuser')
        //  //
        //  // if(this.username===data.username && this.password===data.password){
        //  //   this.$router.push('/showone');
        //  // }else {
        //  //   alert('用户名或密码错误');
        //  // }*/
        //
        //   }
      }
      ,
      register() {
        this.$router.push('/register');
      },

    }
  }

</script>

<template>
  <div class="box">
    <div class="container">
      <el-form action="#">
        <h2>Login From</h2>
        <div class="input-field">
          <input v-model="username" type="text" placeholder="Enter your username"></input>
        </div>
        <div class="input-field">
          <input v-model="password" type="password" placeholder="Enter your password"></input>
        </div>
        <div class="forget">
          <label for="remember">
            <input type="checkbox" id="remember"></input>
            <p>Remeber me</p>
          </label>
          <a href="#">Forgot password?</a>
        </div>
        <div>
          <button class="login-button" @click="login" type="button">Log In</button>
        </div>
        <div class="register">
          <p>Don`t have an account?
            <button @click="register" class="register-button">Register</button>
          </p>
        </div>
      </el-form>
    </div>
    <ul class="bg-squares">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<style scoped>
  *{
    /*清除默认样式*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
  }
  .box{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    z-index: -1;
  }
  .box::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../img/loginbg.jpg"), #000;
    background-position: center;
    background-size: cover;
    z-index: -1;
  }
  .container{
    width: 400px;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    /*背景模糊
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  .container:hover{
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  }
  .container a:hover{
    text-decoration: underline;
  }
  .container a{
    color: #ffdde1;
    text-decoration: none;
  }
  el-form{
    display: flex;
    flex-direction: column;
  }
  h2{
    font-size: 2.2rem;
    margin-bottom: 25px;
    color: #ffffff;
    letter-spacing: 1px;
  }
  .login-button{
    background-color: #271930;
    color: #ffffff;
    font-weight: 600;
    border: none;
    padding: 15px 20px;
    width: 100%;
    cursor: pointer;
    border-radius: 25px;
    font-size: 16px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
  }
  .register-button{
    background-color: #ffdde1;
    color: #e3a4a4;
    border-radius: 25px;
    border: none;
    padding: 10px;
    transition: all 0.3s ease;
  }
  button:hover{
    color: #000000;
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
  }
  .register{
    text-align: center;
    margin-top: 30px;
    color: #ffffff;
  }
  .input-field {
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    margin: 20px 0;
  }
  .input-field input {
    width: 100%;
    height: 40px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #ffffff;
    padding: 0 10px;
  }
  .forget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 35px 0;
    color: #ffffff;
  }
  #remember {
    accent-color: #ffdde1;
  }
  .forget label {
    display: flex;
    align-items: center;
  }
  .forget label p {
    margin-left: 8px;
  }
  /*背景动画*/
  .bg-squares{
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .bg-squares li{
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
    position: absolute;
    bottom: -160px;
    /*执行动画:动画名称 时长 线性 无限次播放*/
    animation: square 20s linear infinite;
  }
  /*为每一个方块设置不同的位置、大小、延迟时间、动画时长、背景色*/
  .bg-squares li:nth-child(1){
    left: 10%;
  }
  .bg-squares li:nth-child(2){
    left: 20%;
    width: 80px;
    height: 80px;
    /*设置动画延迟时间*/
    animation-delay: 2s;
    /*设置动画时长*/
    animation-duration: 17s;
  }
  .bg-squares li:nth-child(3){
    left: 25%;
    animation-delay: 4s;
  }
  .bg-squares li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.25);
    animation-duration: 22s;
  }
  .bg-squares li:nth-child(5){
    left: 70%;
  }
  .bg-squares li:nth-child(6){
    left: 80%;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.2);
    animation-delay: 3s;
  }
  .bg-squares li:nth-child(7){
    left: 32%;
    width: 160px;
    height: 160px;
    animation-delay: 7s;
  }
  .bg-squares li:nth-child(8){
    left: 55%;
    width: 20px;
    height: 20px;
    animation-delay: 15s;
    animation-duration: 40s;
  }
  .bg-squares li:nth-child(9){
    left: 25%;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    animation-delay: 2s;
    animation-duration: 40s;
  }
  .bg-squares li:nth-child(10){
    left: 90%;
    width: 160px;
    height: 160px;
    animation-delay: 11s;
  }
  /*定义动画*/
  @keyframes square {
    0%{
      transform: translateY(0);
    }
    100%{
      transform: translateY(-120vh) rotate(600deg);
    }
  }
</style>